<template>
    <div class="hotelRefion">
        <!-- 展示附件的区域 -->
        <div class="cityscenics">
          <el-row type="flex" style="width:100%">
            <el-col :span="3">区域：</el-col>
            <el-col :span="21">
              <div class="cityscenics-content" v-if="$store.state.hotel.cityscenics.length > 0">
                <span class="scenics-item"
                v-for="(item,index) in $store.state.hotel.cityscenics"
                :key="index">
                  {{ item.name }}
                </span>
              </div>
              <div v-else class="cityscenics-content">
                  0个区域
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" style="width:100%;margin-top: 10px">
            <el-col :span="4" style="display: flex">
                均价：
                <el-tooltip 
                class="item" 
                effect="dark" 
                placement="top-start"> 
                    <div slot="content">等级评定是针对房价，设施和服务等<br/>各方面水平的综合评估</div>
                    <span class="wtf">？</span>
                </el-tooltip>
            </el-col>
            <el-col :span="21">
                <div class="grades">
                    <div class="gradeItem">
                        <div class="stars">
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                        </div>                        
                        <el-tooltip 
                        class="item" 
                        effect="dark" 
                        placement="top-start">           
                            <div slot="content">等级评定是针对房价，设施和服务等<br/>各方面水平的综合评估</div>
                            <p>￥332</p>
                        </el-tooltip>
                    </div>
                    <div class="gradeItem">
                        <div class="stars">
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                        </div>
                        <el-tooltip 
                        class="item" 
                        effect="dark" 
                        placement="top-start"> 
                            <div slot="content">等级评定是针对房价，设施和服务等<br/>各方面水平的综合评估</div>
                            <p>￥521</p>
                        </el-tooltip>
                    </div>
                    <div class="gradeItem">
                        <div class="stars">
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                            <span class="iconfont iconhuangguan"></span>
                        </div>
                        <el-tooltip 
                        class="item" 
                        effect="dark" 
                        placement="top-start"> 
                            <div slot="content">等级评定是针对房价，设施和服务等<br/>各方面水平的综合评估</div>
                            <p>￥768</p>
                        </el-tooltip>
                    </div>
                </div>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
export default {
    mounted(){
    }
}
</script>

<style scoped lang="less">
.hotelRefion{
    font-size: 15px;
    flex:  0 0 48%;
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 14px;
    .cityscenics{
        width: 100%;
        .wtf{
            width: 15px;
            height: 15px;
            text-align: center;
            font-size: 5px;
            border-radius: 50%;
            background-color: #d0c0c0;
            color: white;
            padding-left: 5px;
            box-sizing: border-box;
            cursor: pointer;
        }
        .cityscenics-content{
            .scenics-item{
                padding-right: 10px;
                cursor: pointer;
            }
            .scenics-item:hover{
                color: red;
                text-decoration: underline;
            }   
        }
        .grades{
            display: flex;
            justify-content: space-between;
            .gradeItem{
                cursor: pointer;
                color: #dada3d;
                flex: 0 0 33%;
                display: flex;
                justify-content: space-evenly;
                .stars{
                    display: flex;
                }
            }
        }
    }
}
</style>